﻿
@using IOA.MES.DataAccess.VModel
@{
    ViewBag.Title = "编辑工单";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";

    var cellLevels = ViewBag.CellLevelParas as List<VCellPara>;
    var cellModels = ViewBag.CellModelParas as List<VCellPara>;
    var cellEfficiencies = ViewBag.CellEfficiencyParas as List<VCellPara>;
    var outputPowers = ViewBag.OutputPowerParas as List<VCellPara>;
    var singlePowers = ViewBag.SingleCellPowerParas as List<VCellPara>;
    var powers = ViewBag.BinningPowers as List<VBinningPower>;
}
@model IOA.MES.DataAccess.VModel.VWorkOrder

@section Contents{
    <style>
        html {
            background-color: #FFF;
        }

        .red {
            color: red;
        }

        .layui-form-label {
            width: 90px;
        }

        .layui-table-cell {
            height: auto;
        }

        .powerItem {
            float: left;
            background-color: #FAFAFA;
            border: 1px solid #F6F6F6;
            padding: 5px 10px;
            margin: 0 10px 10px 0;
        }

            .powerItem .layui-icon-delete {
                color: red;
                margin-left: 5px;
            }
    </style>
}
<div id="page"></div>

<script type="text/template" id="tplPage">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" style="padding: 20px 30px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">{{lang.Field.OrderNo}}：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="OrderNo" v-model="model.OrderNo" disabled lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">{{lang.Field.WorkorderNo}}：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="WorkOrderNo" v-model="model.WorkOrderNo" disabled lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">{{lang.Field.WorkShop}}：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="WorkshopCode" v-model="model.WorkshopName" disabled lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">{{lang.Field.ProductionDate}}：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="WorkOrderNo" v-model="model.StartDate" disabled lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">{{lang.Field.EarlyVisibility}}：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="WorkOrderNo" v-model="model.StartDate" disabled lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">{{lang.Field.Production}}：</label>
                <div class="layui-input-inline">
                    <input type="number" class="layui-input" name="OrderNo" v-model="model.Count" disabled lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span class="red">*</span>{{lang.Field.CellQuantity}}：</label>
                <div class="layui-input-inline">
                    <input type="number" class="layui-input" name="WorkOrderNo" v-model="model.CellQuantity" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span class="red">*</span>{{lang.Field.CellLevel}}：</label>
                <div class="layui-input-inline">
                    <select lay-filter="cellLevel" v-model="model.CellLevel" name="cellLevel">
                        <option value=""></option>
                        @foreach (var item in cellLevels)
                        {
                            <option value="@item.ParaValue">@item.ParaValue</option>
                        }
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span class="red">*</span>{{lang.Field.CellModel}}：</label>
                <div class="layui-input-inline">
                    <select lay-filter="cellModel" v-model="model.CellModel" name="cellModel">
                        <option value=""></option>
                        @foreach (var item in cellModels)
                        {
                            <option value="@item.ParaValue">@item.ParaValue</option>
                        }
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span class="red">*</span>{{lang.Field.CellEfficiency}}：</label>
                <div class="layui-input-inline">
                    <select lay-filter="cellEfficiencyMin" v-model="model.CellEfficiencyMin" name="cellEfficiencyMin">
                        <option value=""></option>
                        @foreach (var item in cellEfficiencies)
                        {
                            <option value="@item.ParaValue">@item.ParaValue</option>
                        }
                    </select>
                </div>
                <div class="layui-input-inline" style="width:5px;line-height:35px;">
                    <span>-</span>
                </div>
                <div class="layui-input-inline">
                    <select lay-filter="cellEfficiencyMax" v-model="model.CellEfficiencyMax" name="cellEfficiencyMax">
                        <option value=""></option>
                        @foreach (var item in cellEfficiencies)
                        {
                            <option value="@item.ParaValue">@item.ParaValue</option>
                        }
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">{{lang.Field.CellPower}}：</label>
                <div class="layui-input-inline">
                    <select lay-filter="SingleCellPower" v-model="model.SingleCellPower" name="singleCellPower">
                        <option value=""></option>
                        @foreach (var item in singlePowers)
                        {
                            <option value="@item.ParaValue">@item.ParaValue</option>
                        }
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span class="red">*</span>{{lang.Field.OutputPower}}：</label>
                <div class="layui-input-inline">
                    <select lay-filter="outputPower" name="outputPower">
                        <option value=""></option>
                        @foreach (var item in outputPowers)
                        {
                            <option value="@item.ParaValue">@item.ParaValue</option>
                        }
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-block" style="margin-left:0;">
                    <div class="powerItem" v-for="(item, index) in model.OutputPowers">{{item.OutputPower}}<i class="layui-icon layui-icon-delete" @@click="removePower(index)"></i></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">{{lang.Field.NameplateScheme}}：</label>
                <div class="layui-input-inline">
                    <select lay-filter="selPowers" name="selPowers" lay-search="">
                        @foreach (var item in powers)
                        {
                            <option value="@item.PkId">@($"{item.SchemaName}：{item.NameplateModel}")</option>
                        }
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <table id="table" lay-filter="table"></table>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{{lang.Field.Remark}}：</label>
            <div class="layui-input-block" style="margin-left:120px;">
                <textarea class="layui-textarea" name="Remark" v-model="model.Remark"></textarea>
            </div>
        </div>
        <div class="layui-form-item" v-for="(item, index) in model.QLevels">
            <div class="layui-inline">
                <label class="layui-form-label">Q{{index+1}}{{lang.Field.ComponentProductCode}}：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="ProductCode" v-model="item.ProductCode">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">Q{{index+1}}{{lang.Field.ComponentDesc}}：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="ProductName" v-model="item.ProductName">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button v-if="model.QLevels.length>1" class="layui-btn layui-btn-danger" @@click="removeQLevel(index)"><i class="layui-icon">&#xe67e;</i></button>
                    <button v-if="index==model.QLevels.length-1" class="layui-btn layui-btn-normal" @@click="addQLevel"><i class="layui-icon">&#xe624;</i></button>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align:center;padding-top: 20px;">
            <button class="layui-btn layui-btn-primary" onclick="top.layui.admin.closeThisTabs();"><i class="layui-icon">&#xe616;</i>{{lang.Field.Cancel}}</button>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submit"><i class="layui-icon">&#xe605;</i>{{lang.Field.Submit}}</button>
        </div>
    </div>
</script>

@section Scripts{
    <script>
        var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
        model.StartDate = model.StartDate == null ? "" : model.StartDate.replace("T", " ");
        if (model.QLevels.length <= 0) {
            model.QLevels.push({});
        }
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                lang: JSON.parse(lang).package,
                model: model
            }
        });

        setTimeout(function () {
            initLayui();
        }, 50);

        function initLayui() {
            layui.use(['form', 'layer', 'index', 'laydate', 'table'], function () {
                var layer = layui.layer,
                    table = layui.table,
                    form = layui.form;

                form.on('select', function (data) {
                    switch (data.elem.name) {
                        case "cellLevel":
                            vm.$data.model.CellLevel = data.value
                            break;
                        case "cellModel":
                            vm.$data.model.CellModel = data.value
                            break;
                        case "cellEfficiencyMin":
                            vm.$data.model.CellEfficiencyMin = parseFloat(data.value);
                            break;
                        case "cellEfficiencyMax":
                            vm.$data.model.CellEfficiencyMax = parseFloat(data.value);
                            break;
                        case "singleCellPower":
                            vm.$data.model.SingleCellPower = parseFloat(data.value);
                            break;
                        case "outputPower":
                            if (data.value == "") {
                                return;
                            }
                            var exist = vm.$data.model.OutputPowers.find(function (e) {
                                return e.OutputPower == parseFloat(data.value);
                            });
                            if (!exist) {
                                vm.$data.model.OutputPowers.push({ OutputPower: parseFloat(data.value) });
                            }
                            break;
                        case "selPowers":
                            addPower(parseInt(data.value));
                            break;
                    }
                });

                var option = {
                    elem: '#table'
                    , cols: [[
                        { title: '序号', type: "numbers", width: 80 }
                        , { field: 'NameplateModel', title: '铭牌方案', minWidth: 120 }
                        , { field: 'Power', title: '功率档', minWidth: 150 }
                        , {
                            title: '电流档', minWidth: 160, templet: function (d) {
                                var powers = new Array();
                                for (i = 0; i < d.Currents.length; i++) {
                                    powers.push(d.Currents[i].LevelName + "：" + d.Currents[i].CurrentMin + "A - " + d.Currents[i].CurrentMax + "A");
                                }
                                return powers.join("<br/>");
                            }
                        }
                        , {
                            title: '操作', width: 320, fixed: "right", templet: function (d) {
                                return '<button class="layui-btn layui-btn-sm layui-btn-danger btnRemoveBinningPower" powerid="' + d.PkId + '"><i class="layui-icon">&#xe642;</i>删除</button>';
                            }
                        }
                    ]]
                    , data: vm.$data.model.BinningPowers
                    , even: true
                }
                table.render(option);

                function addPower(powerId) {
                    var exist = vm.$data.model.BinningPowers.find(function (e) {
                        return e.PkId == powerId;
                    });
                    if (exist == null) {
                        var loadId = layer.load();
                        $.ajax({
                            url: "/Plan/GetBinnningPower",
                            data: {
                                powerId: powerId
                            },
                            complete: function () {
                                layer.close(loadId);
                            },
                            success: function (res) {
                                if (res.ErrCode != 200) {
                                    layer.msg(res.ErrMsg, { icon: 5 });
                                    return;
                                } else if (res.Data == null) {
                                    layer.msg("铭牌方案不存在！", { icon: 5 });
                                    return;
                                }
                                vm.$data.model.BinningPowers.push(res.Data);
                                option.data = vm.$data.model.BinningPowers;
                                table.reload("table", option);
                            }
                        });
                    }
                }
                $(document).on("click", ".btnRemoveBinningPower", function () {
                    var powerId = parseInt($(this).attr("powerid"));
                    for (var i = vm.$data.model.BinningPowers.length - 1; i >= 0; i--) {
                        if (vm.$data.model.BinningPowers[i].PkId == powerId) {
                            vm.$data.model.BinningPowers.splice(i, 1);
                            break;
                        }
                    }
                    option.data = vm.$data.model.BinningPowers;
                    table.reload("table", option);
                });

                form.on('submit(submit)', function (data) {
                    var loadId = layer.load();
                    $.ajax({
                        url: "/Plan/EditWorkOrder",
                        data: {
                            model: vm.$data.model
                        },
                        complete: function () {
                            layer.close(loadId);
                        },
                        success: function (res) {
                            if (res.ErrCode != 200) {
                                layer.msg(res.ErrMsg, { icon: 5 });
                                return;
                            }
                            parent.layui.layer.msg("保存成功！", { icon: 6, time: 1500 });
                            top.layui.admin.closeThisTabs();
                        }
                    });
                    return false;
                });
            });
        }

        function removeQLevel(index) {
            if (vm.$data.model.QLevels.length > 1) {
                vm.$data.model.QLevels.splice(index, 1);
            }
        }
        function addQLevel() {
            vm.$data.model.QLevels.push({});
        }
        function removePower(index) {
            vm.$data.model.OutputPowers.splice(index, 1);
        }
    </script>
}
